<template>
    <div class="enum-values-adapter">
        <div v-for="(item, index) in modelValue" :key="index" class="enum-values-adapter-item">
            <span>选项{{ index + 1 }}</span>
            <el-input v-model="item.value" :disabled="props.disabled" @change="optionChange(item)" />
            <el-button
                :disabled="props.disabled"
                type="primary"
                :link="true"
                :icon="Delete"
                @click="deleteOptions(item)"
            >
            </el-button>
        </div>
        <div class="enum-values-adapter-add">
            <el-button :disabled="props.disabled" type="primary" :link="true" :icon="Plus" @click="addOptions">
                <icon-plus />添加选项
            </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {filter, concat} from 'lodash-es';
import {ElInput, ElButton} from 'element-plus';
import {defineModel, defineProps, defineEmits, unref} from 'vue';
import {Plus, Delete} from '@element-plus/icons-vue';

const modelValue = defineModel<Array<{value: string; displayName: string}>>([]);

const props = defineProps({
    disabled: Boolean
});

const emit = defineEmits(['update:modelValue']);

const addOptions = () => {
    const newOptions = concat(unref(modelValue), [{value: '', displayName: ''}]);
    modelValue.value = newOptions;
    emit('update:modelValue', newOptions);
};
const deleteOptions = ({value}) => {
    const newOptions = filter(unref(modelValue), (item) => item.value !== value);
    modelValue.value = newOptions;
    emit('update:modelValue', newOptions);
};
const optionChange = (item) => (item.displayName = item.value);
</script>

<style lang="less" scoped>
@import '../css/lib.less';
.enum-values-adapter {
    display: inline-block;
    .enum-values-adapter-item {
        margin-bottom: 10px;
        .veui-button {
            margin-left: 6px;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    .enum-values-adapter-add {
        margin-top: 5px;
    }
}
</style>
